<template>
	<view class="container">
		<view class="header">
			<view class="yanzhengma">
				绑定授权码：{{authInfo.authCode}}
			</view>
			<view class="time">
				<text>授权码过期还剩</text>
				<text class="time-right">{{authInfo.formattedTime}}</text>
			</view>
			<view class="copy" :data-code="authInfo.authCode" @click="copyCode">
				一键复制授权码
			</view>
			<view class="study">
				如何授权教程
			</view>
		</view>

		<view class="body">
			<view class="title">
				管理已授权的账户（{{shopList.length}}个）
			</view>
			<view class="box">
				<block v-for="item in shopList" :key="item.id">
					<view class="user">
						<view class="left">
							<image src="../../static/images/dianpu.png"
								style="height:100rpx;width: 100rpx;border-radius: 50rpx;margin-right: 20rpx;"></image>
							<view class="">
								<view class="username">
									用户{{item.id}}
								</view>
								<view class="zhanghao">
									账号ID：{{item.id}}
								</view>
								<view class="zhanghao">
									备注：{{item.remark}}
								</view>
							</view>
						</view>
						<view class="right" @click="unbind(item.id)">
							解除授权
						</view>
					</view>
				</block>

			</view>
		</view>
	
	
	</view>
</template>

<script>
	import Http from "@/utils/http"
	const http = new Http()
	export default {
		data() {
			return {
               code:"B079RK4y",
			   authInfo:{
			   },
			   shopList:[],
			   totalSeconds:0
			}
		},
		async onLoad() {
			let that = this
			this.getAuthShopList()
			let res = await http.get("v1/shopAuth/getAuthCode")
			this.authInfo = res.data.data
			if(res.data.data){
				// 如果需要获取秒级别的时间戳，可以除以 1000
				const currentTimestamp = new Date().getTime();
				const currentTimestampInSeconds = Math.floor(currentTimestamp / 1000);
				const totalSeconds = currentTimestampInSeconds - res.data.data.generatorTime;
				
		          this.totalSeconds = 1800-totalSeconds
				  console.log("总===》",totalSeconds);
				that.timer = setInterval(function(){
					if(that.totalSeconds==0){
					 return clearInterval(that.timer)
					}
					const minutes = Math.floor(that.totalSeconds / 60); // 计算分钟数
			
					const seconds = that.totalSeconds % 60; // 计算剩余的秒数
					console.log("分钟===》",minutes);
					console.log("分钟===》",seconds);
					const formattedTime = `${minutes}:${(seconds < 10 ? '0' : '')}${seconds}`;
					console.log("转换后的时间格式：" + formattedTime);
					that.authInfo.formattedTime = formattedTime
					that.totalSeconds = that.totalSeconds -1
				},1000)
			}
		
		},
		onUnload() {
			console.log("离开");
			clearInterval(this.timer)
		},
		
		methods: {
			getAuthShopList(){
				http.get("v1/shopAuth/getAuthShopList").then(res=>{
					this.shopList = res.data.data
				})
			},
			//复制授权码
          copyCode(e){
			 var code = e.currentTarget.dataset.code
			  uni.setClipboardData({
			  	data:code
			  })
		  },
		  //解绑
		  unbind(id){
			uni.showModal({
				title:"是否解绑该账户",
				success: (confirm) => {
					if(confirm.confirm){
						http.post("v1/shopAuth/unbind",{
							id:id
						}).then(res=>{
							if(res.data.code !=200){
								return uni.showToast({
									title:res.data.msg
								})
							}else{
								this.getAuthShopList()
								return uni.showToast({
									title:"解绑成功"
								})
							}
						})
					}
				}
			})  
		  }
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f1f1f1;

	}

	.header {
		margin: 30rpx 20rpx 20rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.yanzhengma {
			font-size: 32rpx;
			font-weight: bold;
			padding-top: 30rpx;
		}

		.time {
			font-size: 28rpx;
			padding: 20rpx 0;

			.time-right {
				font-weight: bold;
				color: rgb(198, 70, 113);
				margin-left: 16rpx;
			}
		}

		.copy {
			background: #00008B;
			width: 340rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			border-radius: 40rpx;
			text-align: center;
			color: #fff;
		}

		.study {
			border: 1rpx solid #00008B;
			width: 340rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			border-radius: 40rpx;
			text-align: center;
			color: #00008B;
			margin: 20rpx 0;
		}
	}

	.body {
		margin: 20rpx;
		background: #fff;

		.title {
			padding: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
			border-bottom: 1rpx solid #f1f1f1;
		}

		.box {
			margin: 20rpx;
             padding-bottom: 30rpx;
			.user {
				background: #fff;
				border: 1rpx solid #eee;
				padding: 20rpx;
				display: flex;
				align-items: center;
				background: #f1f1f1;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.left {
					display: flex;
					flex: 1;
					align-items: center;

					.username {
						font-size: 30rpx;
						font-weight: bold;
					}

					.zhanghao {
						font-size: 28rpx;
						color: #666;
					}
				}

				.right {
					width: 150rpx;
					font-size: 30rpx;
					height: 60rpx;
					line-height: 60rpx;
					border: 1rpx solid #00008B;
					color: #00008B;
					text-align: center;
					border-radius: 10rpx;
				}
			}
			.user:last-child{
				margin-bottom: 0rpx;
			}
		}
	}
</style>